<template>
	<div class="main-container">
		<el-row class="header-row" align="center">
			<el-col :span="8">
				<img src="@/assets/bLogo.png" class="logo" />
			</el-col>
			<el-col :span="8">
				<div class="header-links">
					<div class="header-link">APP下载</div>
					<div class="header-link">白皮书</div>
					<div class="header-link">联系客服</div>
				</div>
			</el-col>
			<el-col :span="8">
				<div class="login-btn point" @click="gotoLogin">登录/注册</div>
			</el-col>
		</el-row>

		<div class="contentBg">
			<div class="banner-content">
				<div class="banner-title">帮帮环境管理平台</div>
				<div class="banner-subtitle">全面、规范、高效的智能环境管理工具，不怕查！</div>
				<div class="banner-features">计划 | 档案 | 固(危) 废 | 废气 | 废水 | 噪声土壤 | 生产设施 | 数据权限</div>
			</div>
			<div>
				<img src="../assets/bIocn5.png" class="banner-image" />
			</div>
		</div>

		<div class="section">
			<div class="section-title">您的企业是否遇到以下难题？</div>
			<div class="problem-cards">
				<div class="problem-card">
					<div class="card-icon-container">
						<img src="../assets/sIcon11.png" class="card-icon" />
					</div>
					<div class="card-content">
						<div class="mb5">环保工作结果不清楚</div>
						<div class="mb5">怕检查</div>
						<div>怕罚款</div>
					</div>
				</div>

				<div class="problem-card">
					<div class="card-icon-container">
						<img src="../assets/sIcon12.png" class="card-icon" />
					</div>
					<div class="card-content">
						<div class="mb5">环保专业性要求高</div>
						<div>缺少专业性人才</div>
					</div>
				</div>

				<div class="problem-card">
					<div class="card-icon-container">
						<img src="../assets/sIcon14.png" class="card-icon" />
					</div>
					<div class="card-content">
						<div class="mb5">环保政策变化快</div>
						<div>应付不过来</div>
					</div>
				</div>

				<div class="problem-card">
					<div class="card-icon-container">
						<img src="../assets/sIcon13.png" class="card-icon-wide" />
					</div>
					<div class="card-content">
						<div class="mb5">环保事务性多</div>
						<div class="mb5">工作难安排</div>
						<div>难管理</div>
					</div>
				</div>

				<div class="problem-card">
					<div class="card-icon-container">
						<img src="../assets/sIcon10.png" class="card-icon-wide" />
					</div>
					<div class="card-content">
						<div class="mb5">文件资料分散</div>
						<div>使用难</div>
					</div>
				</div>

				<div class="problem-card">
					<div class="card-icon-container">
						<img src="../assets/sIcon15.png" class="card-icon" />
					</div>
					<div class="card-content">
						<div class="mb5">人员流动性大</div>
						<div>工作难衔接</div>
					</div>
				</div>
			</div>
		</div>

		<div class="section">
			<div class="section-title">我们帮您这么做！</div>
			<div class="solutions-container">
				<div class="solutions-row">
					<div class="solution-card solution-card-right">
						<img src="@/assets/sIcon22.png" class="solution-icon" />
						<div class="solution-content">
							<div class="solution-title">360透视镜</div>
							<div class="solution-desc">废水、废气、噪声、固废、危废、土壤、环评、环境工程验收、排污许可管理、应急预案等结果全面汇集，状态一目了然。</div>
						</div>
					</div>

					<div class="solution-card solution-card-left">
						<div class="solution-content">
							<div class="solution-title">安全过检</div>
							<div class="solution-desc">各级各类检查所需材料，应有尽有，资料规范，应对环保全生备周期按查游刃有余。</div>
						</div>
						<img src="@/assets/sIcon16.png" class="solution-icon-small" />
					</div>
				</div>

				<div class="solutions-row">
					<div class="solution-card solution-card-right">
						<img src="@/assets/sIcon23.png" class="solution-icon" />
						<div class="solution-content">
							<div class="solution-title">标准化流程</div>
							<div class="solution-desc">备邮门职责定位清晰，各项台账、设备设施、产污环节巡检自行监测、排污许可管理、度急预率各项工作落实到人到点。</div>
						</div>
					</div>

					<div class="solution-card solution-card-left">
						<div class="solution-content">
							<div class="solution-title">规范化作业</div>
							<div class="solution-desc">康水、康气、噪声、固度、危康、土壤技厢最新法律法规及规范进行规范化作业、定期评估、持续改进。</div>
						</div>
						<img src="@/assets/sIcon17.png" class="solution-icon-small" />
					</div>
				</div>

				<div class="solutions-row">
					<div class="solution-card solution-card-right">
						<img src="@/assets/sIcon18.png" class="solution-icon" />
						<div class="solution-content">
							<div class="solution-title">PDRR环境管理体系</div>
							<div class="solution-desc">Plan(计划)、Do(执行)Rasult (票)、Roport 《报告》环保全过管理闭环化管理。</div>
						</div>
					</div>

					<div class="solution-card solution-card-left">
						<div class="solution-content">
							<div class="solution-title">数据安全</div>
							<div class="solution-desc">资料加密、账户授权使用，保证数据和网络资源安全，确保可用性、保密性、完整性、真实性。</div>
						</div>
						<img src="@/assets/sIcon19.png" class="solution-icon-small" />
					</div>
				</div>

				<div class="solutions-row">
					<div class="solution-card solution-card-right">
						<img src="@/assets/sIcon20.png" class="solution-icon" />
						<div class="solution-content">
							<div class="solution-title">云管家</div>
							<div class="solution-desc">有问题，找云管家。政带解读、事务执行、规范管理方案，资料授权忏共事∞冻枯沽偿</div>
						</div>
					</div>

					<div class="solution-card solution-card-left">
						<div class="solution-content">
							<div class="solution-title">风险识别</div>
							<div class="solution-desc">全方位智能识别企业可能面临的备种问题和风险。及时预警处理。</div>
						</div>
						<img src="@/assets/sIcon21.png" class="solution-icon-small" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let that
	export default {
		name: '',
		components: {

		},
		data() {
			return {
				menus: [],
				params: {

				},
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			//console.log(allRoutes)
		},
		methods: {
			gotoLogin() {
				this.$router.push("/login")
			},

		}
	}
</script>

<style scoped>
	.main-container {
		background: #f5f5f5;
		overflow-y: auto;
		height: 100%;
	}

	.header-row {
		background: #fff;
		align-items: center;
		padding: 10px 20px;
		display: flex;
	}

	.logo {
		width: 100px;
	}

	.header-links {
		display: flex;
		justify-content: flex-end;
	}

	.header-link {
		margin-right: 30px;
	}

	.header-link:last-child {
		margin-right: 10px;
	}

	.login-btn {
		text-align: right;
	}

	.contentBg {
		background-image: url("../assets/bIcon6.png");
		background-size: 100% 100%;
		width: 100%;
		margin-top: 30px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px;
		color: #fff;
		padding-right: 100px;
	}
	
	.banner-content {
		font-weight: bold;
	}

	.banner-title {
		font-size: 20px;
		margin-bottom: 30px;
	}

	.banner-subtitle {
		font-size: 16px;
		margin-bottom: 30px;
	}

	.banner-features {
		font-size: 16px;
	}

	.banner-image {
		width: 620px;
		height: 420px;
		margin-right: 200px;
	}

	.section {
		text-align: center;
	}

	.section-title {
		font-size: 20px;
		color: #333;
		padding: 20px 0 0;
	}

	.problem-cards {
		display: flex;
		justify-content: space-around;
		padding: 20px 100px;
	}

	.problem-card {
		background: #fff;
		width: 160px;
		padding: 10px;
	}

	.card-icon-container {
		background: #F6F5F9;
		padding: 10px;
	}

	.card-icon {
		width: 80px;
		height: 100px;
	}

	.card-icon-wide {
		width: 120px;
		height: 100px;
	}

	.card-content {
		margin-top: 10px;
	}

	.mb5 {
		margin-bottom: 5px;
	}

	.solutions-container {
		padding: 20px 20%;
	}

	.solutions-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.solution-card {
		background: #fff;
		display: flex;
		align-items: center;
		padding: 20px;
		width: 500px;
	}

	.solution-card-right {
		margin-right: 10px;
		text-align: right;
	}

	.solution-card-left {
		margin-left: 10px;
		text-align: left;
	}

	.solution-icon {
		width: 100px;
		height: 80px;
	}

	.solution-icon-small {
		width: 100px;
		height: 60px;
	}

	.solution-content {
		margin: 0 20px;
	}

	.solution-title {
		font-size: 18px;
		margin-bottom: 10px;
	}

	.solution-desc {
		line-height: 1.5;
	}
	
	.point{
		color: var(--prev-color-primary);
		font-weight: bold;
		cursor: pointer;
	}
</style>